<template>
  <el-container class="main-group">
    <el-header class="header">
      <el-row class="header-group">
        <el-col :span="8">
          <el-row class="row-group">
            <el-col :span="6">
              <div class="logo"></div>
            </el-col>
            <el-col :span="18" class="title">
              <h3><router-link to="/home/about">机蜂用车申请系统</router-link></h3>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6" :offset="10">
          <el-row class="row-group">
            <el-col :span="6" class="title">
              <span style="color: white">{{loginInfo.departmentName}}</span>
            </el-col>
            <el-col :span="6">
              <div class="avatar-group div-center">
                <img :src="baseImage+loginInfo.avatar" alt="">
              </div>
            </el-col>
            <el-col :span="12" class="title">
              <el-dropdown trigger="click">
                  <span class="username">
                    {{loginInfo.roleName}}:
                    {{ loginInfo.nickname }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="showInfo">个人信息</el-dropdown-item>
                  <el-dropdown-item @click.native="showPassword">修改密码</el-dropdown-item>
                  <el-dropdown-item @click.native="logout" divided>退出系统</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-header>
    <el-main class="main">
      <el-container class="main-body">
        <el-aside class="main-aside" style="width: 200px">
          <el-menu
            :default-active="defaultActive"
            class="nav-menu"
            background-color="#545c64"
            text-color="#fff"
            router
            active-text-color="#ffd04b">
            <el-menu-item index="apply" v-if="loginInfo.roleId === 2 || loginInfo.roleId === 3">
              <i class="el-icon-edit-outline"></i>
              <span slot="title">申请用车</span>
            </el-menu-item>
            <el-submenu index="user" v-if="loginInfo.roleId === 1">
              <template slot="title">
                <i class="el-icon-user"></i>
                <span>用户信息</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="userinfo">用户管理</el-menu-item>
                <el-menu-item index="role">角色管理</el-menu-item>
                <el-menu-item index="department">部门管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="carinfo" v-if="loginInfo.roleId === 1 || loginInfo.roleId === 4">
              <template slot="title">
                <i class="el-icon-truck"></i>
                <span>汽车信息</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="car">汽车管理</el-menu-item>
                <el-menu-item index="brand">品牌管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="recoredinfo" v-if="loginInfo.roleId !== 4">
              <template slot="title">
                <i class="el-icon-tickets"></i>
                <span>申请信息</span>
              </template>
              <el-menu-item-group>
                <template v-if="loginInfo.roleId === 2 || loginInfo.roleId === 3">
                  <el-menu-item index="myapply">我的申请</el-menu-item>
                </template>
                <template v-if="loginInfo.roleId === 1 || loginInfo.roleId === 2">
                  <el-menu-item index="exam">待审核</el-menu-item>
                  <el-menu-item index="agree">{{loginInfo.roleId === 1 ? '管理员同意' : '负责人同意'}}</el-menu-item>
                  <el-menu-item index="allapply">全部申请</el-menu-item>
                </template>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="driver" v-if="loginInfo.roleId === 4 || loginInfo.roleId === 1">
              <template slot="title">
                <i class="el-icon-odometer"></i>
                <span>维修保养</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="weixiu">维修信息</el-menu-item>
                <el-menu-item index="baoyang">保养信息</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main style="background-color: whitesmoke;padding: 10px">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-main>
    <el-footer class="footer div-center">
      <p>版权所有：徐工程20级实训</p>
      <p>开发人员：刘德华，张学友，郭富城</p>
    </el-footer>
    <userinfo-update ref="userinfoUpdate"/>
    <userinfo-password ref="userinfoPassword"/>
  </el-container>
</template>

<script>
import UserinfoUpdate from '@/views/userinfo/UserinfoUpdate.vue'
import UserinfoPassword from '@/views/userinfo/UserinfoPassword.vue'
export default {
  name: 'HomeView',
  components: { UserinfoUpdate, UserinfoPassword },
  data () {
    return {
      loginInfo: {},
      baseImage: process.env.VUE_APP_IMAGE_URL,
      defaultActive: 'about'
    }
  },
  methods: {
    getLoginUser () {
      this.$http.get('userinfo/info').then(data => {
        this.loginInfo = { ...data }
      }).catch(() => {})
    },
    logout () {
      this.$confirm('确定退出系统吗？', { type: 'info' }).then(() => {
        this.$http.post('logout').then(() => {
          this.$cookies.remove('token')
          this.$message.success('注销成功')
          this.$router.replace('/')
        })
      }).catch(() => {})
    },
    setDefaultActive (path) {
      const ps = path.split('/')
      this.defaultActive = ps[ps.length - 1]
    },
    showInfo () {
      this.$refs.userinfoUpdate.init(this.loginInfo.id, true)
    },
    showPassword () {
      this.$refs.userinfoPassword.init(this.loginInfo.id)
    }
  },
  watch: {
    $route (to) {
      this.setDefaultActive(to.path)
    }
  },
  created () {
    this.getLoginUser()
    this.setDefaultActive(this.$route.path)
  }
}
</script>

<style scoped lang="scss">
.header{
  background-color: #545c64;
  .header-group{
    height: 100%;
    .row-group{
      height: 100%;
      &>div{
        height: 100%;
      }
      .logo{
        height: 100%;
        width: 100%;
        background: url("@/assets/logo.png") no-repeat center/contain;
      }
      .title{
        display: flex;
        align-items: center;
        justify-content: left;
        padding-left: 20px;
        .username{
          color: white;
        }
        h3{
          a{
            color: white;
            text-decoration: none;
          }
        }
      }
      .avatar-group{
        height: 60px;
        width: 60px;
        &>img{
          display: block;
          height: 50px;
          width: 50px;
          border-radius: 50%;
        }
      }
    }
    &>div{
      height: 100%;
    }
  }
}
.main{
  padding: 0;
  .main-body{
    height: 100%;
    .main-aside{
      overflow-x: hidden;
      overflow-y: auto;
      .nav-menu{
        height: 100%;
        border-right: none;
      }
    }
  }
}
.footer{
  background-color: #545c64;
  flex-direction: column;
  color: white;
}
</style>
